import { Trans } from "@lingui/macro";
import "./points.scss";
import pointIcon1 from "img/airdrop/1.svg";
import pointIcon2 from "img/airdrop/2.svg";
import pointIcon3 from "img/airdrop/3.svg";
import pointIcon5 from "img/airdrop/5.svg";
import pointIcon6 from "img/airdrop/6.svg";
import pointIcon7 from "img/airdrop/7.svg";
import mochadIcon from "img/airdrop/mochad.svg";
import roleIcon from "img/airdrop/role.svg";
import { Link } from "react-router-dom";

export default function PointsCard() {
    const pointCardList = [
        {
            key: 1,
            icon: pointIcon1,
            title: "Trading Points",
            desc: "Opening and closing positions in Perp.",
            role: "$1 = 1 Points",
            btnText: "Trade Now",
            btnUrl: "/trade",
            isNewTab: false
        },
        {
            key: 2,
            icon: pointIcon2,
            title: "Add liquidity",
            desc: "Continue to provide liquidity on ModeMax.",
            role: "1 MLP/24h = 2 Points",
            btnText: "Add Liquidity Now",
            btnUrl: "/pools",
            isNewTab: false
        },
        {
            key: 3,
            icon: pointIcon3,
            title: "Swap",
            desc: "Swap on ModeMax.",
            role: "$1 = 0.5 Points",
            btnText: "Swap Now",
            btnUrl: "/swap",
            isNewTab: false
        },
        {
            key: 4,
            icon: pointIcon5,
            title: "Profit",
            desc: "Earn points from trading profits.",
            role: "$1 Profit = 0.1 Points",
            btnText: "Trade Now",
            btnUrl: "/trade",
            isNewTab: false
        },
        {
            key: 5,
            icon: mochadIcon,
            title: "MoChad Holders",
            desc: "Hold $MOCHAD tokens.",
            role: "Points x2",
            btnText: "Start",
            btnUrl: "https://www.mochad.xyz/",
            isNewTab: true,
        },
        {
            key: 6,
            icon: pointIcon6,
            title: "Nomis Score",
            desc: "Hold Nomis Score.",
            role: "Points x2",
            btnText: "Start",
            btnUrl: "https://nomis.cc/mode?ref=hNbSArwkM3",
            isNewTab: true,
        },
        {
            key: 7,
            icon: pointIcon7,
            title: "SMD Holders",
            desc: "Hold $SMD tokens.",
            role: "Points x2",
            btnText: "Start",
            btnUrl: "https://swapmode.fi/swap",
            isNewTab: true,
        },
    ]

    const CardItem = ({ data: { key, icon, title, desc, role, btnText, btnUrl, isNewTab } }) => {
        const openUrl = (btnUrl: string) => {
            window.open(btnUrl, '_blank')
        }
        return (
            <li className="card-border !p-10 h-[unset]" key={key}>
                <div className="flex mb-[20px] justify-between items-center">
                    <div className="flex items-center">
                        <img className="point-left-icon" src={icon} alt="Points" />
                        <div className="ml-5 max-md:ml-0 text-[20px]">{title}</div>
                    </div>
                    {
                        isNewTab && (
                            <div className="px-[5px] pr-[10px] py-[3px] bg-[#f5d09526] rounded text-[#FF9D00] text-[16px] mt-[-3px]">
                                🔥Boost
                            </div>
                        )
                    }
                </div>
                <div className="mb-5 text-[#C2C2C2] text-[16px]">{desc}</div>
                <div className="textColor leading-[16px] mb-[8px]">Reward</div>
                <div className="text-[#dffe00] flex mb-[70px]">
                    <img className="point-left-icon" src={roleIcon} alt="Role" />
                    <div className="ml-2 max-md:ml-0">{role}</div>
                </div>
                {
                    isNewTab ? (
                        <div onClick={() => openUrl(btnUrl)} className="op-btn mb-[2.4rem] w-full h-[32px] text-[14px] font-medium text-[#151515] flex items-center justify-center border bg-[#dffe00] border-[#dffe00] rounded-[4px]">
                            <Trans>{btnText}</Trans>
                        </div>
                    ) : (
                        <Link
                            className="op-btn w-full h-[32px] text-[14px] mb-[2.4rem] font-medium text-[#151515] flex items-center justify-center border border-solid bg-[#dffe00] border-[#dffe00] rounded-[4px]"
                            to={btnUrl}
                        >
                            <Trans>{btnText}</Trans>
                        </Link>
                    )
                }
            </li>
        )
    }

    return (
        <div className="point-card">
            {/* <div className="mb-10 text-[#FFFFFF] font-bold">Complete Tasks to earn Points</div> */}
            <ul className="pl-[0px] grid grid-cols-3 gap-y-6 max-md:grid-cols-1 max-md:gap-y-6 max-md:gap-x-6 md:gap-x-6">
                {
                    pointCardList.map((item, index) => (
                        <CardItem data={item} key={index} />
                    ))
                }
            </ul>
        </div>
    );
}
